<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view class="router"></router-view>
      </keep-alive>
      <router-view class="router" v-if="!$route.meta.keepAlive"></router-view>
    </transition>

    <mt-tabbar :fixed="true" v-model="selected" v-if="nowpath()==1">
      <mt-tab-item class="index-tabbar" id="/BorrowBike" @click.native="handleClick(selected)">
        <!-- <router-link to="/about">About {{transitionName}} {{!$route.meta.keepAlive}}</router-link> -->
        <img slot="icon" src="./assets/bike.png" />
        借车
      </mt-tab-item>

      <mt-tab-item class="index-tabbar" id="/PileCenter" @click.native="handleClick(selected)">
        <img slot="icon" src="./assets/stop.png" />
        停车
      </mt-tab-item>

      <mt-tab-item class="index-tabbar" id="/PersonalCenter" @click.native="handleClick(selected)">
        <img slot="icon" src="./assets/mine.png" />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import defaultSetting from "./settings";
// import { Toast } from "mint-ui";

export default {
  name: "app",
  data() {
    return {
      selected: "/BorrowBike"
      // beforeUnload_time: "",
      // gap_time: ""
    };
  },
  methods: {
    handleClick(selected) {
      this.$router.push({ path: selected });
    },
    nowpath() {
      if (
        this.$route.path != "/login" &&
        this.$route.path != "/register" &&
        this.$route.path != "/ResetPassword"&&
        this.$route.path != "/ResetAllPassword"
      )
        return 1;
      else return 0;
    }
    //页面刷新和关闭函数
    // beforeunloadHandler(e) {
    //   console.log(e);
    //   this.beforeUnload_time = new Date().getTime();
    // },
    // unloadHandler(e) {
    //   console.log(e);

    //   this.gap_time = new Date().getTime() - this.beforeUnload_time;
    //   console.log(this.gap_time);

    //   //判断是窗口关闭还是刷新
    //   if (this.gap_time <= 5) {
    //     //如果是登录状态，关闭窗口前，移除用户
    //     if (this.$store.getters.userData.name) {
    //       this.$store.commit("user/LOGOUT");
    //     }
    //   } else {
    //     console.log('刷新回到首页');
    //     this.$router.push({ path: "/" });
    //               Toast({
    //         message: "代号与序号都不能为空",
    //         position: "bottom",
    //         duration: 2000
    //       })
    //   }
    // }
  },
  computed: {
    transitionName() {
      if (defaultSetting.needPageTrans) {
        return this.$store.state.direction;
      }
      return "";
    }
  },
  mounted() {
    // 刷新页面回到首页
    window.addEventListener("load", () => {
      // 滚动事件变为 scroll
      if (this.$route.path !== "/") {
        //首页
        this.$router.replace("/"); // 切换到首页
      }
    });
  }
};
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}

.router {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

/* page change */
$--transition-time: 300ms;
.back-enter-active,
.back-leave-active,
.forward-enter-active,
.forward-leave-active {
  will-change: transform;
  transition: transform $--transition-time;
  position: absolute;
  height: 100%;
  backface-visibility: hidden;
  perspective: 1000;
}
.back-enter {
  opacity: 0.75;
  transform: translate3d(-50%, 0, 0) !important;
}
.back-enter-active {
  z-index: -1 !important;
  transition: transform $--transition-time;
}
.back-leave-active {
  transform: translate3d(100%, 0, 0) !important;
  transition: transform $--transition-time;
}
.forward-enter {
  transform: translate3d(100%, 0, 0) !important;
}
.forward-enter-active {
  transition: transform $--transition-time;
}
.forward-leave-active {
  z-index: -1;
  opacity: 0.65;
  transform: translate3d(-50%, 0, 0) !important;
  transition: transform $--transition-time;
}
/*************************************/

.index-tabbar {
  text-decoration: none;
}
</style>
